<template>
  <div class="dashboard-container">
    <div class="dashboard-text" />
    <UploadExcel
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
    />
    <!-- 显示数据 -->
    <el-table :data="tableData" border highlight-current-row style="width: 100%;margin-top:20px;">
      <el-table-column v-for="item of tableHeader" :key="item" :prop="item" :label="item" />
    </el-table>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { formatExcelDate } from '@/utils'
import { importEmployee } from '@/api/employees'

const result = [
  {
    '姓名': '小张',
    '手机号': '13800000252',
    '入职日期': 44505,
    '转正日期': 44892,
    '工号': '9002',
    '部门': '总裁办'
  }
]
// 对应的英文
const mapInfo = {
  '入职日期': 'timeOfEntry',
  '手机号': 'mobile',
  '姓名': 'username',
  '转正日期': 'correctionTime',
  '工号': 'workNumber',
  '部门': 'departmentName',
  '聘用形式': 'formOfEmployment'
}
export default {
  name: 'Dashboard',
  data() {
    return {
      tableData: [],
      tableHeader: [],
      // 转换之后的数据
      data123: []
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  methods: {
    //* 将表格数据转换成 专业格式
    transExcel(arr) {
      console.log(arr)
      // 先遍历每个对象  ,取出对象的键 一个中文名对象 然后遍历这个对象
      // 拿到对应的英文名对象 对这个对象进行赋值
      return arr.map(item => {
        // console.log(item)
        const zhKeys = Object.keys(item)
        // console.log(zhKeys) //中文名键数组
        const obj = {} // 初始化一个新对象
        zhKeys.forEach(zhKey => {
          // item 每个中文名
          // 根据中文名 在对应的英文对象中取到对应英文
          const eKey = mapInfo[zhKey]
          // console.log(eKey)
          // 对象左边加属性  右边就是读取值赋值
          //* 需要注意的是 时间需要额外包装
          if (eKey === 'timeOfEntry' || eKey === 'correctionTime') {
            obj[eKey] = new Date(formatExcelDate(item[zhKey], '-'))
          } else {
            obj[eKey] = item[zhKey]
          }
        })
        // console.log(obj)
        return obj
      })
    },

    // 上传之前
    beforeUpload(file) {
      const isLt1M = file.size / 1024 / 1024 < 1
      if (isLt1M) {
        return true
      }
      this.$message({
        message: '读出来的excel的内容是',
        type: 'warning'
      })
      return false
    },
    // 读取参数是一个对象 有两个属性 表内容 和表头
    async handleSuccess({ results, header }) {
      this.tableData = results
      this.tableHeader = header

      //* 将数据转换成指定的格式
      this.data123 = this.transExcel(this.tableData)
      // 发送请求
      try {
        const res = await importEmployee(this.data123)
        this.$message.success(res.message)
        // 回退到之前的页面
        this.$router.back()
      } catch (error) {
        this.$message.error(error.message)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
